import React, { useEffect, useCallback, useState } from 'react'
import { getProduct } from '../../service/request'
import { Table } from 'antd';

const columns = [
    {
        title: '商品名称',
        dataIndex: 'store_name',
    },
    {
        title: '品牌',
        dataIndex: 'keyword',
    },
    {
        title: '信息',
        dataIndex: 'store_info',
    },
    {
        title: '价格￥',
        dataIndex: 'price',
    }
];

const HomePage = () => {
    const [loading, setLoading] = useState(false)
    const [products, setProducts] = useState([])
    const loadData = useCallback(() => {
        setLoading(true)
        getProduct().then((res) => {
            const products = res.data.list
            setProducts(products)
        }).finally(() => {
            setLoading(false)
        })

    }, [])

    useEffect(() => {
        loadData()
    }, [loadData])
    return (
        <Table bordered loading={loading} columns={columns} dataSource={products} />
       )
}

export default HomePage
